<?php 
if (!session_id()) {
    session_start();
}
if(isset($_POST['all_match'])&&$_POST['all_match']==true){
    global $wpdb;
    $tb = 'ap_painting_user' ;
    $user = $wpdb->get_row("SELECT * FROM ap_painting_user WHERE user_id = {$_SESSION['user_id']}");
    $data = array('turn_spin'=> $user->turn_spin + 1);
    $wpdb->update($tb,$data,array( 'id' => $user->id ));
    $_SESSION['buoc_1'] = true;
    exit;
}
get_header();
?>
<?php
	if(!isset($_SESSION['home'])||$_SESSION['home']!=true){
		wp_redirect( home_url() ); exit;
	}
    global $wpdb;
    $user = $wpdb->get_row("SELECT * FROM ap_painting_user WHERE user_id = {$_SESSION['user_id']}");
    if(!isset($_SESSION['buoc_1'])||$_SESSION['buoc_1']!=true) $_SESSION['buoc_1'] = false;
?>
<?php
	$random = rand(1,5);
    $nameimg = "coloring_{$random}";
    $img = "coloring_{$random}.jpg";

    $random = rand(1,5);
    $masknameimg = "item{$random}";
    $maskimg = "item{$random}.png";

    if($random==1) $piece = 30;
    if($random==2) $piece = 25;
    if($random==3) $piece = 20;
    if($random==4) $piece = 26;
    if($random==5) $piece = 19;
?>
<script type="text/javascript">
  $('.container').addClass('intro buoc-1');
</script>

	
<script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/jquery.blockUI.js"></script>
<script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/kinetic-v4.6.0.min.js"></script>
<script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/jquery.jcarousel.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('template_url'); ?>/css/skins/tango/skin.css" />
<script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/jqdialog/jqdialog.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo bloginfo('template_url'); ?>/js/jqdialog/jqdialog.css"/>
<link href="<?php echo bloginfo('template_url'); ?>/css/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="<?php echo bloginfo('template_url'); ?>/js/colorpicker/jquery.colorPicker.js" type="text/javascript"></script>
<link rel="stylesheet" href="<?php echo bloginfo('template_url'); ?>/js/colorpicker/colorPicker.css" type="text/css" />

<div class="content-buoc">
	<img class="puzzle" alt="<?php echo $nameimg ?>" src="<?php echo bloginfo('template_url'); ?>/images/background/<?php echo $img ?>" />
	<div class="avatar">
		<img class="element-animation" src="<?php echo bloginfo('template_url'); ?>/img/avatar.png">
	</div>
	<img class="frame" src="<?php echo bloginfo('template_url'); ?>/img/buoc1.png">
</div>
<div class="ok-buoc1">
   <a href="javascript:;"><img src="<?php echo bloginfo('template_url'); ?>/img/btn-ok.png"></a>
</div>
<script type="text/javascript">
var site_url = '<?php echo site_url() ?>';
$('.ok-buoc1').live('click',function(){
    init_puzzle();
});
$('.ok-buoc2').live('click',function(){
    document.location.href = '<?php echo site_url() ?>/khao-sat';
});
</script>
<!-- |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| -->


<div class="content tranhtai" style="display:none;">
    <div class="mainimg"> 
    	<img class="puzzle" alt="<?php echo $nameimg ?>" src="<?php echo bloginfo('template_url'); ?>/images/background/<?php echo $img ?>" />
        <img class="puzzle mask" alt="<?php echo $masknameimg ?>" src="<?php echo bloginfo('template_url'); ?>/images/item/<?php echo $maskimg ?>" />
    	<img class="frame" src="<?php echo bloginfo('template_url'); ?>/img/bg-puzzle.png">
        <!--- CHO NAY DE VE LUNG TUNG --> 
        <div id="canvasHidden" style="display:none;"></div>
        <div id="canvasDiv"></div>
        <div id="canvasDiv2"></div>
        <!--[if IE]><script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/excanvas.js"></script><![endif]-->
        <script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/html5-canvas-drawing-app.js"></script>
        <script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/js/shape.js"></script>
        <script type="text/javascript">
            var toolChoose = 0;
            var editing = false;
            var iszoom = false;
            var outcanvas = false;
			var folderflag = true;

            function init_puzzle(){
                $.blockUI({css: {border: 'none', padding: '15px', backgroundColor: '#000', '-webkit-border-radius': '10px', '-moz-border-radius': '10px', opacity: .5, color: '#fff'}});
                prepareCanvas();
                curTool = "open";
                outlineImage.src = base_url + "images/background/<?php echo $img ?>";
                $('#canvas').css('cursor', 'default');

                <?php for($i=1;$i<=$piece;$i++){ ?>
                var img<?php echo $i ?> = new Image();
                var maskm<?php echo $i ?> = new Image();
                var maskb<?php echo $i ?> = new Image();
                var tempImg<?php echo $i ?> = new Image();
                var already<?php echo $i ?> = false;

                maskm<?php echo $i ?>.src = base_url + "images/mask/mask<?php echo $random ?><?php echo $i ?>.png";
                maskb<?php echo $i ?>.src = base_url + "images/mask/mask<?php echo $random ?><?php echo $i ?>b.png";
                img<?php echo $i ?>.src = base_url + "images/background/<?php echo $img ?>";
                img<?php echo $i ?>.onload = function() {
                    if(maskb<?php echo $i ?>.width==0||maskm<?php echo $i ?>.width==0) return;
                    var img_width<?php echo $i ?> = img<?php echo $i ?>.width;
                    var img_height<?php echo $i ?> = img<?php echo $i ?>.height;
                    tempImg<?php echo $i ?> = merge_mask(img<?php echo $i ?>,maskm<?php echo $i ?>,maskb<?php echo $i ?>,img_width<?php echo $i ?>,img_height<?php echo $i ?>);
                    tempImg<?php echo $i ?>.onload = function(){
                        if(already<?php echo $i ?>==false){
                            already<?php echo $i ?> = true;
                            draw_mask_image(img<?php echo $i ?>, maskm<?php echo $i ?>, maskb<?php echo $i ?>, tempImg<?php echo $i ?>);
                            <?php if($i==$piece){ ?>
                                $.unblockUI();
                            $('.content-buoc').hide();
                            $('.ok-buoc1').hide();
                            $('.content.tranhtai').show();
                            <?php } ?>
                        }
                    }
                }
                maskb<?php echo $i ?>.onload = function() {
                    if(img<?php echo $i ?>.width==0||maskm<?php echo $i ?>.width==0) return;
                    var img_width<?php echo $i ?> = img<?php echo $i ?>.width;
                    var img_height<?php echo $i ?> = img<?php echo $i ?>.height;
                    tempImg<?php echo $i ?> = merge_mask(img<?php echo $i ?>,maskm<?php echo $i ?>,maskb<?php echo $i ?>,img_width<?php echo $i ?>,img_height<?php echo $i ?>);
                    tempImg<?php echo $i ?>.onload = function(){
                        if(already<?php echo $i ?>==false){
                            already<?php echo $i ?> = true;
                            draw_mask_image(img<?php echo $i ?>, maskm<?php echo $i ?>, maskb<?php echo $i ?>, tempImg<?php echo $i ?>);
                            <?php if($i==$piece){ ?>
                                $.unblockUI();
                            $('.content-buoc').hide();
                            $('.ok-buoc1').hide();
                            $('.content.tranhtai').show();
                            <?php } ?>
                        }
                    }
                }
                maskm<?php echo $i ?>.onload = function() {
                    if(maskb<?php echo $i ?>.width==0||img<?php echo $i ?>.width==0) return;
                    var img_width<?php echo $i ?> = img<?php echo $i ?>.width;
                    var img_height<?php echo $i ?> = img<?php echo $i ?>.height;
                    tempImg<?php echo $i ?> = merge_mask(img<?php echo $i ?>,maskm<?php echo $i ?>,maskb<?php echo $i ?>,img_width<?php echo $i ?>,img_height<?php echo $i ?>);
                    tempImg<?php echo $i ?>.onload = function(){
                        if(already<?php echo $i ?>==false){
                            already<?php echo $i ?> = true;
                            draw_mask_image(img<?php echo $i ?>, maskm<?php echo $i ?>, maskb<?php echo $i ?>, tempImg<?php echo $i ?>);
                            <?php if($i==$piece){ ?>
                                $.unblockUI();
                            $('.content-buoc').hide();
                            $('.ok-buoc1').hide();
                            $('.content.tranhtai').show();
                            <?php } ?>
                        }
                    }
                }
                <?php } ?>
            }
        </script>
    </div>
    <div class="ok-buoc2" style="display:none;">
       <a href="javascript:;"><img src="<?php echo bloginfo('template_url'); ?>/img/btn-hoanthanhbuoc1.png"></a>
    </div>
</div>

<script type="text/javascript">
function reset_choose_shape(){
    choose_shape = '';
    layer.draw();
    paint = false;
    $('.input-text').fadeOut('fast',function(){ 
        $('.input-text').removeClass('active');
    });
}

function loadfimg($albumid) {
    $.blockUI({css: {
            border: 'none',
            padding: '15px',
            backgroundColor: '#000',
            '-webkit-border-radius': '10px',
            '-moz-border-radius': '10px',
            opacity: .5,
            color: '#fff'
        }});
    jQuery.post("<?php echo site_url('/') ?>album/?detail=" + $albumid, function($data) {
        jQuery('#albumfuck').html($data);
        if (jQuery('#ftoolbarx').css('bottom') === '0px') {
            jQuery('#color_selector').css('z-index', '-9999');
        }
        switchimg('ele_0');
        folderflag = false; // disable folder button 
        $.unblockUI();
        function loadfimg($albumid) {
            jQuery.post("<?php echo site_url('/') ?>album/?detail=" + $albumid, function($data) {
                jQuery('#albumfuck').html($data);

            });
        }
    });
}
function saveimg2db() {
    var dataURL = canvas.toDataURL("image/png");
    $.blockUI({css: {
            border: 'none',
            padding: '15px',
            backgroundColor: '#000',
            '-webkit-border-radius': '10px',
            '-moz-border-radius': '10px',
            opacity: .5,
            color: '#fff'
        }});
    $.ajax({
        type: "POST",
        url: "<?php echo site_url() ?>/save-image",
        data: {
            imgBase64: dataURL
        }
    }).done(function(url) {
        jQuery('#latestimg').html(url);
        editing = false;
        $.unblockUI();
        $('#canvas').remove();
        prepareCanvas();
        curTool = "open";
        outlineImage.src = base_url + "images/background/coloring_1.jpg";
        $('#canvas').css('cursor', 'default');
    });
}
function saveImage(){
    $urllink = "<?php echo site_url() ?>/save-image";
    $reload = false;

    var dataURL = canvas.toDataURL("image/png");
    $.blockUI({css: {
            border: 'none',
            padding: '15px',
            backgroundColor: '#000',
            '-webkit-border-radius': '10px',
            '-moz-border-radius': '10px',
            opacity: .5,
            color: '#fff'
        }});
    $.ajax({
        type: "POST",
        url: $urllink,
        data: {
            imgBase64: dataURL,
            imgid: jQuery('#imgidhidden').val(),
            layoutimg : jQuery('#layoutimg').val()
        }
    }).done(function(url) {
        jQuery('#latestimg').html(url);
        $.unblockUI();
        editing = false;

    });
}
function loadexam() { 
    $.blockUI({css: {border: 'none', padding: '15px', backgroundColor: '#000', '-webkit-border-radius': '10px', '-moz-border-radius': '10px', opacity: .5, color: '#fff'}});
    
    if (jQuery('#albumfuck').css('display') === 'none') {
        jQuery('#canvasDiv').hide();
        jQuery.post('<?php echo site_url() ?>/album', function($data) {
            jQuery('#albumfuck').html($data);
            jQuery('#albumfuck').fadeIn();
            outcanvas = true;
            jQuery('#lialbum').addClass('active');
            $.unblockUI();
        });

    } else {
        jQuery('#albumfuck').hide();
        
        $('#canvas').remove();
        editing = false;
        prepareCanvas();
        outlineImage.src = base_url + "images/watermelon-duck-outline.png";
        $('.centerel img').click();
        $.unblockUI();
        
    }
}
function convertHex(hex) {
    hex = hex.replace('#', '');
    _r = parseInt(hex.substring(0, 2), 16);
    _g = parseInt(hex.substring(2, 4), 16);
    _b = parseInt(hex.substring(4, 6), 16);

    result = {
        r: _r,
        g: _g,
        b: _b
    }
    return result;
}
jQuery(document).ready(function() {
    jQuery('#addimg').click(function() {
        folderflag = true;
            if (editing) {

                var currele = jQuery(this);
                // confirm dialog
                $.jqDialog.confirm("Bé có lưu hình ảnh đang vẽ lại ?",
                        function() {
                            result = true;
                            if (result === true) {
                                saveimg2db();
                            }
                        }, // callback function for 'YES' button
                        function() {
                            $('#canvas').remove();
                            editing = false;
                            prepareCanvas();
                            outlineImage.src = base_url + "images/watermelon-duck-outline.png";
                            $('.centerel img').click();
                        }      // callback function for 'NO' button
                );
            } else {
                $('#canvas').remove();
                editing = false;
                prepareCanvas();
                outlineImage.src = base_url + "images/watermelon-duck-outline.png";
                $('.centerel img').click();
            }
            jQuery('#albumfuck').hide();
            zoomIn = false;
            $('.ico-zoom').removeClass('is-zoom');
            $('.ico-zoom').attr('src', '<?php echo bloginfo('template_url'); ?>/img/icon_zoom.png');
        });

});
</script>
<?php get_footer() ?>